<script setup lang="ts">
import markdownClass from "@/components/markdown/markdownClass.ts";
import errorsStore from "@/piniaStore/errorsStore.ts";

interface MyMarkdownProps{
  name?:string
  modelValue?:string,
  height?:number,
  placeholder?:string
}
const props = withDefaults(defineProps<MyMarkdownProps>(),{
    name:'content',
    modelValue:'',
    height:300,
    placeholder:'请输入内容'
})
const emit = defineEmits(['update:modelValue']);
nextTick(()=>{
  const markdownObj = new markdownClass('#editor',`${props.height}px`,`${props.modelValue}`);
  //on的change事件
  markdownObj.editor.on('change',(type:string)=>{
    //type为markdown
    const content =  type == 'markdown' ? markdownObj.editor.getMarkdown() : markdownObj.editor.getHTML();
    emit('update:modelValue',content);
  });
  const els = document.getElementsByClassName('toastui-editor-mode-switch');
  const el = els[0] as HTMLDivElement;
  el.style.display='none';
  markdownObj.editor.on('focus',()=>{
    errorsStore().clearError(props.name);
  })
})
</script>

<template>
<div id="editor"></div>
</template>

<style lang="scss" scoped>
    #editor{
      @apply bg-white rounded;
    }

</style>